<template>
    <div class="flex flex-col grow-1">
        <v-banner single-line>
            <div class="flex items-center shrink-0">
                <el-date-picker type="month" v-model="date">
                </el-date-picker>

            </div>
        </v-banner>

        <div class="w-full p-3">

            <el-calendar class="calendar" v-model="date">
                <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
                <template slot="dateCell" slot-scope="{date, data}">
                    <!-- <p :class="data.isSelected ? 'is-selected' : ''">
                        {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : '' }}
                    </p> -->
                    <div class="h-full" @click="openRedmine(calendarValue(data.day), data.type)">
                        <div>
                            {{ data.day.split('-').slice(2).join('') }}
                        </div>
                        <div :style="{ color: calendarValue(data.day).color }">
                            {{ calendarValue(data.day).txt }}
                        </div>
                    </div>
                </template>
            </el-calendar>

        </div>

        <el-dialog :visible.sync="redmineVisible" title="Redmine" width="75%">
            <redmine v-if="redmineVisible" :org-id="orgId" :date-str="calendarRow.date" />
        </el-dialog>
    </div>
</template>


<script>
import { defineComponent, ref, toRef, watch } from '@vue/composition-api';
import { getCalendarList, generateCalendarList } from '@/api/taskRedmineCalendar'
import redmine from './components/redmine.vue';
import moment from 'moment';
import { Message } from 'element-ui';
export default defineComponent({
    components: {
        redmine
    },

    props: {
        orgName: String,
        orgId: Number,
    },

    setup(props) {

        const date = ref(new Date())

        watch(date, () => {
            fetchCalendar()
        })

        const calendarList = ref([])
        function fetchCalendar() {
            getCalendarList({
                orgId: props.orgId,
                date: moment(date.value).format('YYYY-MM-DD')
            }).then(res => {
                const data = res.data
                calendarList.value = data
            })
        }
        watch(toRef(props, 'orgId'), (val) => {
            if (val) {
                fetchCalendar()
            }
        }, { immediate: true })
        function calendarValue(dateStr) {
            if (new Date(dateStr).getMonth() !== date.value.getMonth()) {
                return {}
            }
            const calendar = calendarList.value.find(item => item.date === dateStr)
            if (calendar) {
                if (calendar.status === 1) {
                    return {
                        txt: '已生成',
                        color: '#409EFF',
                        ...calendar
                    }
                } else if (calendar.status === 2) {
                    return {
                        txt: '已发送',
                        color: '#67C23A',
                        ...calendar
                    }
                }
            } else {
                return {
                    txt: '未生成',
                    color: '#E6A23C',
                    date: dateStr
                }
            }
        }

        const redmineVisible = ref(false)
        const calendarRow = ref({})
        function openRedmine(row, type) {
            console.log(row)
            if (type !== 'current-month') {
                return
            }
            if (!row.id) {
                this.$confirm("是否生成?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    generateCalendarList({
                        orgId: props.orgId,
                        date: row.date
                    }).then(res => {
                        Message.success('OK')
                        fetchCalendar()
                    })
                });
                return
            }
            calendarRow.value = row
            redmineVisible.value = true
        }

        function fetchRedmineList() {


        }

        return {
            date,
            fetchCalendar,
            calendarValue,

            redmineVisible,
            calendarRow,
            openRedmine
        }
    }
})


</script>

<style scoped>
.calendar>>>.is-today {
    color: #5e6d82 !important;
}
.calendar>>>.is-selected {
    background-color: #FFFFFF;
}
</style>